<template>
<div>
  <div style="background-color:white;height:60px">
    <div style="background-color:gray;height:0.1px;width:100%; position: relative;top:55px"></div>
    <p style="font-size:17px; color:gray;">课程列表</p>
    </div>
  
  <el-table :data="tableData" style="width: 100%;">
    <el-table-column label="序号" width="180" >
      <template #default="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.id }}</span>
      </template>
    </el-table-column>
    <el-table-column label="课程名称" width="180" >
     
          <template #default="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column label="创建时间"  width="180" >
   <template #default="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
      <!-- <template #default="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template> -->
    </el-table-column>
     <el-table-column label="可见状态" width="180" >    
  <template v-slot="scope">
  <el-switch
    v-model="scope.row.status"
    @click="open"
     />
  </template>
        </el-table-column>
      <el-table-column label="操作" width="0"  > 
        <el-button><el-icon><edit-pen /></el-icon></el-button>
        <el-button><el-icon><files /></el-icon></el-button>
        <el-button><el-icon><monitor /></el-icon></el-button>
        <el-button><el-icon><school /></el-icon></el-button>
    
      </el-table-column>
  </el-table></div>
</template>

<script>
import {EditPen,Files,Monitor,School} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
  export default {

     components: {
       EditPen,
       Files,
       Monitor,
      School,
     },
    data() {
      return {
        open(){
           ElMessage({
            showClose: true,
            message: '恭喜你，这是一条成功消息',
            type: 'success',
          })
        },
        tableData: [
          {
            id: '1',
            name: 'Java程序设计',
            date: '2020-12-12',
            status:1,
          },
          {
            id: '2',
            name: 'MySQL数据库技术',
            date: '2021-12-11',
             status:0,
          },
          {
            id: '3',
            name: 'Web前端开发基础',
            date: '2021-12-11',
             status:1,
          },
          {
           id: '4',
            name: 'web前端开发实战',
            date: '2021-12-11',
             status:0,
          },
        ],
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row)
      },
      handleDelete(index, row) {
        console.log(index, row)
      },
    },
    
  }
  
</script>